<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板管理 - ToolsAPI</title>
    <link rel="icon" type="image/x-icon" href="img/ik.ico">
    
    <!-- Bootstrap 5 CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="css/fontawesome.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="css/custom.css" rel="stylesheet">
    <!-- 小米风格样式 -->
    <link href="css/xiaomi-style.css" rel="stylesheet">
</head>
<body class="xiaomi-theme">
    <div id="header"></div>
    
    <!-- 主容器 -->
    <div class="xiaomi-admin-container">
        <div id="sidebar"></div>

        <!-- 主内容区域 -->
        <main class="xiaomi-main-content">
            <div class="row mb-4">
                <div class="col-12">
                    <div class="xiaomi-page-header">
                        <h2 class="page-title">
                            <i class="fas fa-file-alt me-2"></i>
                            模板管理
                        </h2>
                        <p class="page-subtitle">管理和下载数据转换模板文件</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-8 mb-4">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-download me-2"></i>
                                可用模板
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="template-card">
                                        <div class="template-icon">
                                            <i class="fas fa-file-excel text-success"></i>
                                        </div>
                                        <div class="template-info">
                                            <h6>PH1数据模板</h6>
                                            <p class="text-muted small">用于PH1格式数据的标准模板</p>
                                        </div>
                                        <div class="template-actions">
                                            <button class="btn btn-outline-primary btn-sm" onclick="downloadTemplate('ph1')">
                                                <i class="fas fa-download"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="template-card">
                                        <div class="template-icon">
                                            <i class="fas fa-file-excel text-primary"></i>
                                        </div>
                                        <div class="template-info">
                                            <h6>PH2数据模板</h6>
                                            <p class="text-muted small">用于PH2格式数据的标准模板</p>
                                        </div>
                                        <div class="template-actions">
                                            <button class="btn btn-outline-primary btn-sm" onclick="downloadTemplate('ph2')">
                                                <i class="fas fa-download"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="template-card">
                                        <div class="template-icon">
                                            <i class="fas fa-file-excel text-warning"></i>
                                        </div>
                                        <div class="template-info">
                                            <h6>PH3数据模板</h6>
                                            <p class="text-muted small">用于PH3格式数据的标准模板</p>
                                        </div>
                                        <div class="template-actions">
                                            <button class="btn btn-outline-primary btn-sm" onclick="downloadTemplate('ph3')">
                                                <i class="fas fa-download"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="template-card">
                                        <div class="template-icon">
                                            <i class="fas fa-file-excel text-info"></i>
                                        </div>
                                        <div class="template-info">
                                            <h6>银海品项模板</h6>
                                            <p class="text-muted small">用于银海品项格式的标准模板</p>
                                        </div>
                                        <div class="template-actions">
                                            <button class="btn btn-outline-primary btn-sm" onclick="downloadTemplate('yinhai')">
                                                <i class="fas fa-download"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mb-4">
                    <div class="xiaomi-card">
                        <div class="card-header">
                            <h5 class="card-title">
                                <i class="fas fa-info-circle me-2"></i>
                                使用说明
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="usage-guide">
                                <div class="guide-item">
                                    <div class="guide-step">1</div>
                                    <div class="guide-content">
                                        <h6>下载模板</h6>
                                        <p class="small text-muted">选择对应的数据格式模板下载</p>
                                    </div>
                                </div>
                                <div class="guide-item">
                                    <div class="guide-step">2</div>
                                    <div class="guide-content">
                                        <h6>填写数据</h6>
                                        <p class="small text-muted">按照模板格式填写您的数据</p>
                                    </div>
                                </div>
                                <div class="guide-item">
                                    <div class="guide-step">3</div>
                                    <div class="guide-content">
                                        <h6>上传转换</h6>
                                        <p class="small text-muted">上传填写好的文件进行转换</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Scripts -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/layout-loader.js"></script>
    <script src="js/templates.js"></script>
</body>
</html>